<!doctype html>

<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="shortcut icon" href="/favicon.ico">
  <title>注册页</title>
  <!-- 导入CSS -->
  <link href="./dist/css/tabler.min.css?1674944402" rel="stylesheet" />
  <link rel="stylesheet" href="./dist/css/jquery.toast.css">
  <!-- 设置字体和动画样式 -->
  <style>
    /* 表单动画 */
    .form-control, .form-selectgroup-label {
      transition: all 0.3s ease;
    }
    .form-control:focus {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    /* 按钮动画 */
    .btn {
      transition: all 0.3s ease;
    }
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    /* 背景动画 */
    .page {
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
    }
    @keyframes gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    /* 卡片样式优化 */
    .card {
      backdrop-filter: blur(10px);
      background-color: rgba(255, 255, 255, 0.9);
      border: none;
      transition: all 0.3s ease;
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    /* 链接动画 */
    a {
      transition: all 0.3s ease;
      position: relative;
    }
    a:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -2px;
      left: 0;
      background-color: currentColor;
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    a:hover:after {
      transform: scaleX(1);
    }
  </style>
</head>

<body class="d-flex flex-column">
  <!-- 正文 -->
  <div class="page page-center">
    <div class="container container-tight py-4">
      <div class="text-center mb-4">
        <img src="./image/bit-forum-logo01.png" height="50" alt="">
        <h1 class="mt-3">加入 IT 论坛</h1>
        <p class="text-muted">开启你的知识分享之旅</p>
      </div>
      <form id="signUpForm" class="card card-md" autocomplete="off" novalidate>
        <div class="card-body">
          <h2 class="text-center mb-4">用户注册</h2>
          <div class="text-center mb-4">
            <p class="text-muted">成为我们社区的一员，与志同道合的朋友一起交流</p>
          </div>
          <!-- 用户名 -->
          <div class="mb-3">
            <label class="form-label required">用户名</label>
            <input type="text" class="form-control " placeholder="请输入用户名" name="username" id="username">
            <div class="invalid-feedback">用户名不能为空</div>
          </div>
          <!-- 昵称 -->
          <div class="mb-3">
            <label class="form-label required">昵称</label>
            <input type="text" class="form-control" placeholder="请输入昵称" name="nickname" id="nickname">
            <div class="invalid-feedback">昵称不能为空</div>
          </div>
          <!-- 密码 -->
          <div class="mb-3">
            <label class="form-label required">密码</label>
            <div class="input-group input-group-flat">
              <input type="password" class="form-control" placeholder="请输入密码" autocomplete="off" name="password"
                id="password">
              <span class="input-group-text">
                <a href="javascript:void(0);" class="link-secondary" id="password_a" title="显示密码"
                  data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                    stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                    <path
                      d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" />
                  </svg>
                </a>
              </span>
              <div class="invalid-feedback">密码不能为空</div>
            </div>
          </div>
          <!-- 确认密码 -->
          <div class="mb-3">
            <label class="form-label required">确认密码</label>
            <div class="input-group input-group-flat">
              <input type="password" class="form-control" placeholder="再次输入密码" autocomplete="off" name="passwordRepeat"
                id="passwordRepeat">
              <span class="input-group-text">
                <a href="javascript:void(0);" class="link-secondary" id="passwordRepeat_a" title="显示密码"
                  data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                    stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                    <path
                      d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" />
                  </svg>
                </a>
              </span>
              <div class="invalid-feedback">请检查确认密码</div>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-check">
              <input type="checkbox" class="form-check-input" id="policy" />
              <span class="form-check-label">同意 <a href="#" tabindex="-1">论坛使用条款和隐私政策</a>.</span>
            </label>
          </div>
          <div class="form-footer">
            <button type="button" class="btn btn-primary w-100" id="submit">注册</button>
          </div>
        </div>
      </form>
      <div class="text-center text-muted mt-3">
        已有账号? <a href="./sign-in.html" tabindex="-1">立即登录</a>
      </div>
    </div>
  </div>

  <!-- 在form表单后面添加模态框 -->
  <div class="modal modal-blur fade" id="modal-policy" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">论坛使用条款和隐私政策</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="markdown">
            <h3>使用条款</h3>
            <p>欢迎使用我们的论坛！请仔细阅读以下条款：</p>
            
            <h4>1. 用户行为规范</h4>
            <ul>
              <li>遵守中华人民共和国相关法律法规</li>
              <li>不得发布违法、色情、暴力等不良信息</li>
              <li>尊重其他用户，维护良好的社区氛围</li>
              <li>对自己发布的内容负责</li>
            </ul>

            <h4>2. 内容规范</h4>
            <ul>
              <li>发布内容必须原创或具有合法转载权</li>
              <li>不得侵犯他人知识产权</li>
              <li>不得发布垃圾广告信息</li>
              <li>遵守版块发帖规则</li>
            </ul>

            <h3>隐私政策</h3>
            <h4>1. 信息收集</h4>
            <p>我们收集的信息包括：</p>
            <ul>
              <li>注册信息（用户名、密码等）</li>
              <li>个人资料（昵称、头像等）</li>
              <li>使用记录（发帖、评论等）</li>
            </ul>

            <h4>2. 信息使用</h4>
            <p>我们承诺：</p>
            <ul>
              <li>仅将信息用于提供服务</li>
              <li>不会向第三方出售您的个人信息</li>
              <li>采取安全措施保护您的信息</li>
            </ul>

            <h4>3. Cookie使用</h4>
            <p>我们使用Cookie来：</p>
            <ul>
              <li>保持登录状态</li>
              <li>提供个性化服务</li>
              <li>改善用户体验</li>
            </ul>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn me-auto" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">我已阅读并同意</button>
        </div>
      </div>
    </div>
  </div>
</body>
<!-- 导入JS -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/jquery-3.6.3.min.js"></script>
<script src="./dist/js/jquery.toast.js"></script>
<script>

$(function () {
  // 获取表单并校验
  $('#submit').click(function () {
    let checkForm = true;
    // 校验用户名
    if (!$('#username').val()) {
      $('#username').addClass('is-invalid');
      checkForm = false;
    }
    // 校验昵称
    if (!$('#nickname').val()) {
      $('#nickname').addClass('is-invalid');
      checkForm = false;
    }
    // 校验密码非空
    if (!$('#password').val()) {
      $('#password').addClass('is-invalid');
      checkForm = false;
    }
    // 校验确认密码非空, 校验密码与重复密码是否相同
    if (!$('#passwordRepeat').val() || $('#password').val() != $('#passwordRepeat').val()) {
      $('#passwordRepeat').addClass('is-invalid');
      checkForm = false;
    }

    // 检验政策是否勾选
    if (!$('#policy').prop('checked')) {
      $('#policy').addClass('is-invalid');
      checkForm = false;
    }
    // 根据判断结果提交表单
    if (!checkForm) {
      return false;
    }
    
    // 构造数据
    let postData = {
      username : $('#username').val(),
      nickname : $('#nickname').val(),
      password : $('#password').val(),
      passwordRepeat : $('#passwordRepeat').val()
    };
    // 发送AJAX请求 
    // contentType = application/x-www-form-urlencoded
    // 成功后跳转到 sign-in.html
    $.ajax ({
      type: 'POST',
      url: '/user/register',
      data: postData,
      contentType: 'application/x-www-form-urlencoded',
      success: function(response) {
        if (response.code == 0) {
            // 提示信息
            $.toast({
              heading: '成功',
              text: '注册成功，请登录',
              icon: 'success'
            });
            // 跳转到登录页面
            location.assign('/sign-in.html');
        } else {
            // 提示信息
            $.toast({
              heading: '警告',
              text: response.message,
              icon: 'warning'
            });
        }
      },
      error: function() {
          // 提示信息
          $.toast({
            heading: '错误',
            text: '访问出现问题',
            icon: 'error'
        });
      }
    });
  });

  // 表单元单独检验
  $('#username, #nickname, #password').on('blur', function () {
    if ($(this).val()) {
      $(this).removeClass('is-invalid');
      $(this).addClass('is-valid');
    } else {
      $(this).removeClass('is-valid');
      $(this).addClass('is-invalid');
    }
  })

  // 检验确认密码
  $('#passwordRepeat').on('blur', function () {
    if ($(this).val() && $(this).val() == $('#password').val()) {
      $(this).removeClass('is-invalid');
      $(this).addClass('is-valid');
    } else {
      $(this).removeClass('is-valid');
      $(this).addClass('is-invalid');
    }
  })

  // 校验政策是否勾选
  $('#policy').on('change', function () {
    if ($(this).prop('checked')) {
      $(this).removeClass('is-invalid');
      $(this).addClass('is-valid');
    } else {
      $(this).removeClass('is-valid');
      $(this).addClass('is-invalid');
    }
  })


  // 密码框右侧明文密文切换按钮
  $('#passwordRepeat_a').click(function () {
    if($('#passwordRepeat').attr('type') == 'password') {
      $('#passwordRepeat').attr('type', 'text');
    } else {
      $('#passwordRepeat').attr('type', 'password');
    }
  });
  $('#password_a').click(function () {
    if($('#password').attr('type') == 'password') {
      $('#password').attr('type', 'text');
    } else {
      $('#password').attr('type', 'password');
    }
  });

  // 添加政策链接点击事件
  $('.form-check-label a').click(function(e) {
    e.preventDefault();
    var modal = new bootstrap.Modal(document.getElementById('modal-policy'));
    modal.show();
  });

  // 点击"我已阅读并同意"按钮时自动勾选复选框
  $('#modal-policy .btn-primary').click(function() {
    $('#policy').prop('checked', true).trigger('change');
  });
});

</script>

<!-- 添加样式 -->
<style>
.markdown h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
}

.markdown h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.markdown ul {
  margin-bottom: 1rem;
}

.markdown p {
  margin-bottom: 0.5rem;
}
</style>

</html>